<!DOCTYPE html>
<html>
<head>
    <title>基于Boa的WEB网页监控系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="小冯老师博客">
    <meta name="description" content="WEB网页监控系统">
    <link rel="stylesheet" href="./index.css">
    <script type="text/javascript" src="./index.js"></script>
    <style>
        /* 统一行内元素的对齐和间距 */
        #content h1, #content iframe {
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px 0 0; /* 调整间距 */
        }
        /* 修复 marquee 的闭合标签问题 */
        marquee {
            display: inline-block;
        }
    </style>
</head>

<body onload="show()">
    <!-- 时间显示 -->
    <h2 style="text-align: right; color: #cc0033;">
        <div id="nowDiv"></div>
    </h2>

    <audio autoplay loop hidden>
        <source src="./qianqianquege.mp3" type="audio/mpeg">
    </audio>

    <div id="header">
        <h1 style="text-align: center;">WEB无线网络监控系统设计</h1>
        <h2>
            <marquee behavior="alternate">只有目的明确，结果清晰，过程才最高效，才不会轻易被干扰，被改变方向。</marquee>
        </h2>
    </div>

    <div id="content">
        <!-- 关键修改：iframe 和 h1 同行 -->
        <iframe 
            src="http://192.168.9.200:8080/?action=stream" 
            width="640" 
            height="480"
            style="display: inline-block; vertical-align: middle;"
        ></iframe>
        <h1 style="display: inline-block; vertical-align: middle;">无线监控系统设计我采用了四种设计思路：</h1>
        
        <h2 style="display: inline-block; vertical-align: middle;">第一、......；</h2>
        <h2 style="display: inline-block; vertical-align: middle;">第二、......；</h2>
        <h2 style="display: inline-block; vertical-align: middle;">第三、......；</h2>
        <h2 style="display: inline-block; vertical-align: middle;">第四、......</h2>
        
        <h2 style="display: inline-block; vertical-align: middle;">Design by: <a href="http://www.makeru.com.cn" target="_blank">华清远见创客学院</a> 2018-2-28</h2>
        <br>
        <a target="_blank" href="http://192.168.9.200:8080/?action=snapshot">拍照</a>
        <span style="font-size: 14px; color: pink;" style="display: inline-block; vertical-align: middle;">（点击拍照后会在网页上显示相片，右键可保存）</span>
    </div>

    <script>
        // 密码校验
        var password = prompt('请输入密码 (本网站需输入密码才可进入):', '');
        if (password != 'xiaohui') {
            alert("密码不正确,无法进入本站!!");
            window.opener = null;
            window.close();
        }

        // 时间显示
        function show() {
            var date = new Date();
            var now = date.getFullYear() + "年";
            now += (date.getMonth() + 1) + "月";
            now += date.getDate() + "日";
            now += date.getHours() + "时";
            now += date.getMinutes() + "分";
            now += date.getSeconds() + "秒";
            document.getElementById("nowDiv").innerHTML = now;
            setTimeout(show, 1000);
        }
    </script>
</body>
</html>
